<!--
 * @Author: Wangtao
 * @Date: 2020-10-19 16:18:17
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-11-09 18:17:08
-->
<template>
  <div
    ref="node"
    :style="nodeContainerStyle"
    @dblclick="dbClickNode"
    @click="clickNode"
    @mouseup="changeNodeSite"
    :class="nodeContainerClass"
  >
   <i class="delete V7_iconfont V7_iconV7tubiao_shanchumian" v-if="!node.viewOnly" @click.stop="nodeDelete"></i>
   <div class="node-info">
      <div class="ef-node-left-ico flow-node-drag">
        <icon-svg :icon-class="node.type | getTypeIco" />
      </div>
      <!-- 节点名称 -->
      <div class="ef-node-text" :show-overflow-tooltip="true">
        {{ node.data.name }}
      </div>
   </div>
    <div class="condition">
      <span v-for="(condition, index) in node.condition" :id='node.id + "-" + index' :key="index"><span class="flow-node-drag">{{condition.label}}</span></span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { v4 as uuidv4 } from 'uuid'

@Component({
  name: 'FlowNode',
  components: {},
  filters: {
    getTypeIco (type) {
      if (type === 'ivr-node-start') {
        return 'kaishijiedian1'
      } else if (type === 'ivr-node-play') {
        return 'bofangyuyin'
      } else if (type === 'ivr-node-date') {
        return 'shijiantiaojian'
      } else if (type === 'ivr-node-menu') {
        return 'anjiancaidan1'
      } else if (type === 'ivr-node-transfer') {
        return 'zhuanrengong1'
      } else if (type === 'ivr-node-voicemail') {
        return 'liuyan'
      } else if (type === 'ivr-node-callurl') {
        return 'shujujiaohu'
      } else if (type === 'ivr-node-collect') {
        return 'caijishouhao'
      } else if (type === 'ivr-node-dynamic-route') {
        return 'tiaojianjiedian'
      }
    }
  }
})

export default class FlowNode extends Vue {
  @Prop({ default: {} }) private node!: any
  @Prop({ default: {} }) private activeElement!: any

  private get getUUID () {
    return uuidv4().replace(/-/g, '')
  }

  private get nodeContainerClass () {
    return {
      'ef-node-container': true,
      'ef-node-active': (this.activeElement.type === 'node' && this.activeElement.nodeId === this.node.id)
    }
  }

  // 节点容器样式
  private get nodeContainerStyle () {
    return {
      top: this.node.top,
      left: this.node.left
    }
  }

  private get nodeIcoClass () {
    const nodeIcoClass = {}
    // 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
    nodeIcoClass['flow-node-drag'] = !this.node.viewOnly
    return nodeIcoClass
  }

  // 双击节点
  private dbClickNode () {
    this.$emit('dbClick', this.node)
  }

  private clickNode () {
    this.$emit('nodeClick', this.node)
  }

  // 鼠标移动后抬起
  private changeNodeSite () {
    // 避免抖动
    if (this.node.left === (this.$refs as any).node.style.left && this.node.top === (this.$refs as any).node.style.top) {
      return
    }
    this.$emit('changeNodeSite', {
      nodeId: this.node.id,
      left: (this.$refs as any).node.style.left,
      top: (this.$refs as any).node.style.top
    })
  }

  // 点击删除节点
  private nodeDelete () {
    this.$emit('delete', this.node)
  }
}
</script>

<style lang="stylus" scoped>
$-font-color = #008cee
$-condition-bg = #F2F7F8
/* 节点的最外层容器 */
.ef-node-container:hover
  .delete
    display block
.ef-node-container
  position absolute
  display flex
  border: 1px solid #E6EAED
  box-shadow: 0px 1px 1px 0px #E6EAED
  border-radius 5px
  background-color #fff
  flex-direction column
  z-index -1
  .delete
    color #FC6B5C
    font-size 12px
    position absolute
    right 5px
    top 5px
    cursor pointer
    display none
  .node-info
    display flex
    align-items center
    padding 15px 40px 15px
    color #303753
    font-size 14px
    justify-content center
  .condition
    display flex
    flex-direction row
    justify-content center
    > span
      color $-font-color
      background-color $-condition-bg
      padding 3px 5px 3px
      margin 0 5px 10px
    > span:hover
      cursor crosshair
.ef-node-container:hover
  /* 设置移动样式 */
  cursor move
  /* box-shadow: #1879FF 0px 0px 12px 0px; */
  // background-color #F0F7FF
  border 1px dashed #1879FF
/* 节点激活样式 */
.ef-node-active
  background-color #F0F7FF
  /* box-shadow: #1879FF 0px 0px 12px 0px; */
  background-color #F0F7FF
  border 1px solid #1879FF
/* 节点左侧的竖线 */
.ef-node-left
  width 4px
  background-color #1879FF
  border-radius 4px 0 0 4px
/* 节点左侧的图标 */
.ef-node-left-ico
  margin-right 5px
// .ef-node-left-ico:hover
  /* 设置拖拽的样式 */

/* 节点显示的文字 */
.ef-node-text
  /* 设置超出宽度文本显示方式 */
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  text-align center
  font-weight 500
/* 节点右侧的图标 */
.ef-node-right-ico
  line-height 32px
  position absolute
  right 5px
  color #84CF65
  cursor default
/* 节点的几种状态样式 */
.el-node-state-success
  line-height 32px
  position absolute
  right 5px
  color #84CF65
  cursor default
.el-node-state-error
  line-height 32px
  position absolute
  right 5px
  color #F56C6C
  cursor default
.el-node-state-warning
  line-height 32px
  position absolute
  right 5px
  color #E6A23C
  cursor default
.el-node-state-running
  line-height 32px
  position absolute
  right 5px
  color #84CF65
  cursor default
/* node-form */
.ef-node-form-header
  height 32px
  border-top 1px solid #dce3e8
  border-bottom 1px solid #dce3e8
  background #F1F3F4
  color #000
  line-height 32px
  padding-left 12px
  font-size 14px
.ef-node-form-body
  margin-top 10px
  padding-right 10px
  padding-bottom 20px
/* 连线中的label 样式 */
.jtk-overlay.flowLabel:not(.aLabel)
  padding 4px 10px
  background-color white
  color #565758 !important
  border 1px solid #E0E3E7
  border-radius 5px
/* label 为空的样式 */
.emptyFlowLabel, .ef-dot
  background-color #959AA6
  border-radius 5px
.ef-dot-hover
  background-color red
.ef-rectangle
  background-color #1879FF
.ef-rectangle-hover
  background-color red
.ef-img, .ef-img-hover, .ef-drop-hover
  border 1px dashed #1879FF
</style>
<style lang='stylus'>
.node-info
  .svg-icon
    font-size 17px
</style>
